<template>
  <el-drawer
    title="批量挂载标签"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    @closed="clearDialog"
    custom-class="tag-drawer batch-drawer category-tag-import-drawer"
    v-drawerResize
  >
    <tag-import ref="tagImport" :type="type" :config="config" @close="close"></tag-import>
    <div class="drawer-btns">
      <el-button size="medium" @click="beforeClose()">取消</el-button>
      <el-button size="medium" @click="back" v-if="config.stepNumber === 3">上一步</el-button>
      <el-button size="medium" type="primary" @click="next" v-if="!config.error">{{
        config.stepNumber === 3 ? '确定' : '下一步'
      }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
import tagImport from '../../../components/tag-import'
export default {
  components: {
    tagImport
  },
  data() {
    return {
      drawerVisible: false,
      type: 4,
      config: {
        stepNumber: 0,
        error: false
      }
    }
  },
  methods: {
    showDrawer() {
      this.drawerVisible = true
    },
    back() {
      this.$refs.tagImport.back()
    },
    next() {
      this.$refs.tagImport.next()
    },
    close() {
      this.drawerVisible = false
      this.$emit('refresh')
    },
    beforeClose() {
      var close = true
      var msg = ''
      if (this.config.stepNumber > 0) {
        close = false
        msg = '确定要取消导入吗？'
      }
      if (close) {
        this.drawerVisible = false
      } else {
        this.$confirm(msg)
          .then(() => {
            this.drawerVisible = false
          })
          .catch(() => {})
      }
    },
    clearDialog() {
      this.config = {
        stepNumber: 0,
        error: false
      }
      this.$refs.tagImport.reset()
    }
  }
}
</script>

<style lang="scss">
.tag-drawer.category-tag-import-drawer {
  .el-drawer__body {
    .drawer-wrap {
      top: 100px;
    }
  }
}
</style>
